<template>
  <div class="season-info">
    <div class="season-data">
      <div class="total-performance">
        <div class="total-performance-text">赛季总览</div>
      </div>
      <div class="rank-win-draw-lose">
        <div class="league-result">
          <div class="league-rank">
            <div class="league-rank-number">{{ teamData.rank }}</div>
            <div class="league-rank-text">联赛排名</div>
          </div>
          <div class="win-draw-lose">
            <div class="match-result">
              <div class="match-result-number">{{ teamData.win }}</div>
              <div class="match-result-text">胜</div>
            </div>
            <div class="win-draw-lose-block"></div>
            <div class="match-result">
              <div class="match-result-number">{{ teamData.draw }}</div>
              <div class="match-result-text">平</div>
            </div>
            <div class="win-draw-lose-block"></div>
            <div class="match-result">
              <div class="match-result-number">{{ teamData.lose }}</div>
              <div class="match-result-text">负</div>
            </div>
          </div>
        </div>
        <div class="goals-conceded">
          <div class="goals-conceded-item">
            <div class="team-goals-number">{{ teamData.goal }}</div>
            <div class="team-goals-text">进球</div>
          </div>
          <div class="goals-conceded-item">
            <div class="team-goals-number">{{ teamData.conceded }}</div>
            <div class="team-goals-text">丢球</div>
          </div>
        </div>
      </div>
      <div class="radar-pic">
        <playerRadar :player-score="getRadarData" />
      </div>
      <div class="yellow-red-card">
        <div class="yellow-card">{{ teamData.yellowCard }}</div>
        <div class="red-card">{{ teamData.redCard }}</div>
      </div>
      <div class="card-text">
        <div class="yellow-card-text">黄牌</div>
        <div class="red-card-text">红牌</div>
      </div>
    </div>
    <div class="career-data">
      <div class="career-title">
        <span>赛季赛程</span>
      </div>
      <div class="career-league">
        <TeamScheduleTable :season="season" :teamId="teamId" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import playerRadar from "../../ant_v/radarScore/PlayerRadar";
import TeamScheduleTable from "./TeamScheduleTable";
export default {
  name: "TeamInfo",
  props: {
    teamId: {
      type: Number,
    },
    season: {
      type: String,
      default() {
        return "2019赛季";
      },
    },
  },
  components: {
    playerRadar,
    TeamScheduleTable,
  },
  watch: {
    season: {
      handler(newSeason) {
        const newSeasonNumId = parseInt(newSeason);
        this.getTeamData(newSeasonNumId, this.teamId);
      },
    },
    teamId: {
      handler(newTeamId) {
        this.getTeamData(parseInt(this.season), newTeamId);
      },
    },
  },
  data() {
    return {
      show: true,
      teamData: {},
      radarItem: [
        "attackScore",
        "defenseScore",
        "organizeScore",
        "passScore",
        "skillScore",
      ],
    };
  },
  methods: {
    //获取球队整个赛季的排名、胜平负等数据
    async getTeamData(seasonId, teamId) {
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/teamfeatures/${seasonId}/${teamId}`
      );
      this.teamData = data;
      // console.log(data)
    },
  },
  computed: {
    //获取雷达数据的数组
    getRadarData() {
      const radar = [];
      this.radarItem.forEach((item) => {
        let obj = {};
        obj.item = item;
        obj.score = this.teamData[item] * 100;
        radar.push(obj);
      });
      return radar;
    },
  },
  created() {
    this.getTeamData(2019, 2531);
  },
};
</script>

<style scoped>
/*.fade-enter-active, .fade-leave-active {*/
/*  transition: opacity 2s;*/
/*}*/
/*.fade-enter, .fade-leave-to !* .fade-leave-active below version 2.1.8 *! {*/
/*  opacity: 0;*/
/*}*/
.season-info {
  display: flex;
  justify-content: space-between;
  width: 1440px;
  height: 710px;
  margin: 30px auto 0;
  /*background-color: red;*/
}
.season-data {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 370px;
  height: 100%;
  background-color: #194568;
}
.career-data {
  width: 1060px;
  height: 100%;
  background-color: #f1f6f9;
}
.total-performance {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  line-height: 50px;
  /*background-color: red;*/
}
.total-performance-text {
  color: #16c79a;
  font-weight: bold;
  font-size: 40px;
  width: 50%;
}
.selector-season /deep/ .el-input {
  width: 80%;
}
.selector-season /deep/ .el-input__inner {
  height: 30px;
}
.rank-win-draw-lose {
  margin-top: 5px;
  width: 100%;
  height: 230px;
  /*background-color: orange;*/
}
.league-result {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 60%;
  /*background-color: #01538B;*/
}
.league-rank {
  width: 100px;
  height: 100%;
  /*background-color: red;*/
}
.league-rank-number {
  width: 100%;
  height: 70%;
  line-height: 80px;
  font-size: 80px;
  font-weight: bold;
  color: #1a936f;
  /*background-color: brown;*/
}
.league-rank-text {
  line-height: 35px;
  font-size: 24px;
  font-weight: bold;
  color: white;
}
.win-draw-lose {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 250px;
  height: 100%;
  /*background-color: pink;*/
}
.match-result {
  width: 30%;
  height: 80%;
  /*background-color: #9a6e3a;*/
}
.match-result-number {
  width: 100%;
  height: 60%;
  font-size: 48px;
  color: white;
  font-weight: bold;
  line-height: 66px;
  /*background-color: #4EA3DD;*/
}
.match-result-text {
  font-size: 24px;
  color: white;
  font-weight: bold;
  line-height: 44px;
}
.win-draw-lose-block {
  margin-top: -35px;
  width: 2px;
  height: 40%;
  background-color: white;
}
.goals-conceded {
  display: flex;
  width: 100%;
  height: 40%;
  justify-content: space-around;
}
.goals-conceded-item {
  width: 20%;
  height: 100%;
  /*background-color: red;*/
}
.team-goals-number {
  width: 100%;
  height: 65%;
  /*background-color: #4EA3DD;*/
  line-height: 60px;
  font-size: 48px;
  font-weight: bold;
  color: white;
}
.team-goals-text {
  width: 100%;
  height: 35%;
  /*background-color: #01538B;*/
  line-height: 32px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}
.radar-pic {
  width: 100%;
  height: 297px;
  margin-top: 10px;
  /*background-color: pink;*/
}
.yellow-red-card {
  display: flex;
  margin-top: 10px;
  width: 100%;
  height: 60px;
  /*background-color: firebrick;*/
}
.yellow-card {
  margin-left: 70px;
  color: black;
  width: 40px;
  height: 100%;
  line-height: 60px;
  font-weight: bold;
  font-size: 28px;
  background-color: #fcdd11;
}
.red-card {
  margin-left: 150px;
  color: black;
  width: 40px;
  height: 100%;
  line-height: 60px;
  font-weight: bold;
  font-size: 28px;
  background-color: #fa1427;
}
.card-text {
  display: flex;
  width: 100%;
  height: 30px;
  margin-top: 10px;
  /*background-color: pink;*/
}
.yellow-card-text {
  margin-left: 50px;
  width: 80px;
  line-height: 30px;
  height: 100%;
  font-size: 20px;
  font-weight: bold;
  color: white;
  /*background-color: red;*/
}
.red-card-text {
  margin-left: 110px;
  width: 80px;
  height: 100%;
  line-height: 30px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  /*background-color: indigo;*/
}
.career-title {
  width: 100%;
  height: 50px;
  color: #16c79a;
  font-weight: bold;
  font-size: 28px;
  line-height: 50px;
  background-color: #194568;
}
.career-title > span {
  float: left;
  margin-left: 30px;
}
</style>
